import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as classNames from 'classnames';
import { List } from "immutable";
import * as _ from "lodash";
import ButtonGroup from "react-bootstrap/es/ButtonGroup";
import Row from "react-bootstrap/es/Row";
import Col from "react-bootstrap/es/Col";
import * as Overlay from 'react-overlays/lib/Overlay';
import Popover from "react-bootstrap/es/Popover"
var styles = require('./LeftPanel.less');

class SecondMenu extends React.PureComponent<any, any> {
  componentDidMount() {
    const self = this;
    $(ReactDOM.findDOMNode(this))
      .on("mouseover", function (e) {
        e.stopPropagation();
      })
  }

  componentWillUnmount() {
  }

  componentDidUpdate(prevProps, prevState) {
  }


  render() {
    const { top, menu, props } = this.props;
    const subMenusGroup = [];
    const total = menu.subs.length;

    for (let index = 0; index < total / 2; index++) {
      subMenusGroup[index] = [menu.subs[index * 2]];
      (index * 2 + 1) < total && subMenusGroup[index].push(menu.subs[index * 2 + 1]);
    }

    return (
      <Popover {...props}>
        <table>
          <tbody>
            <tr>
              {
                subMenusGroup.map((subMenus, index) =>
                  <td className="list" key={index}>
                    {
                      subMenus.map((subMenu, index) =>
                        <div key={index}>
                          <p className="title">{subMenu.title}</p>
                          {
                            subMenu.subs.map((menu, index) =>
                              <div key={menu.title} className="menuItem">
                                <a href="javascript:;" className="text" onClick={() => {
                                  this.props.onMenu(menu.title, menu.url);
                                }}>{menu.title}</a>
                                {menu.add && <a href="javascript:;" title={menu.add.title} className="addIcon"
                                  onClick={() => {
                                    this.props.onMenu(menu.add.title, menu.add.url);
                                  }}></a>}
                              </div>)
                          }
                        </div>
                      )}
                  </td>
                )
              }
            </tr>
          </tbody>
        </table>
      </Popover>)
  }
}

const saleMenu = {
  icon: "./images/11.png",
  title: "销售",
  subs: [
    {
      title: "销售",
      subs: [{
        url: "sale-list.html",
        title: "销售历史",
        add: {
          url: "../sale-add.html",
          title: "新增销售单"
        }
      }]
    }]
}

const buyMenu = {
  icon: "./images/11.png",
  title: "进货",
  subs: [{
    title: "进货",
    subs: [{
      url: "../buy/add",
      title: "新增进货"
    }, {
      url: "../distbuy/list",
      title: "进货历史"
    }]
  }]
}

const storeMenu = {
  icon: "./images/11.png",
  title: "库存",
  subs: [{
    title: "库存",
    subs: [{
      url: "sale/add",
      title: "库存查询"
    }, {
      url: "sale/list",
      title: "销售历史"
    }]
  }]
}

const clientMenu = {
  icon: "./images/33.png",
  title: "客户",
  subs: [{
    title: "客户",
    subs: [{
      url: "sale/add",
      title: "库存查询"
    }, {
      url: "sale/list",
      title: "销售历史"
    }]
  }, {
    title: "供应商",
    subs: [{
      url: "sale/add",
      title: "库存查询"
    }, {
      url: "sale/list",
      title: "销售历史"
    }]
  }, {
    title: "客户",
    subs: [{
      url: "sale/add",
      title: "库存查询"
    }, {
      url: "sale/list",
      title: "销售历史"
    }]
  }, {
    title: "供应商",
    subs: [{
      url: "sale/add",
      title: "库存查询"
    }, {
      url: "sale/list",
      title: "销售历史"
    }]
  }]
}

const infoMenu = {
  icon: "./images/66.png",
  title: "基础资料",
  subs: [{
    title: "商品资料",
    subs: [{
      url: "sale/add",
      title: "库存查询"
    }, {
      url: "sale/list",
      title: "销售历史"
    }]
  }, {
    title: "仓库管理",
    subs: [{
      url: "sale/add",
      title: "库存查询"
    }, {
      url: "sale/list",
      title: "销售历史"
    }]
  }]
}

const settingMenu = {
  icon: "./images/setting_icon.png",
  title: "系统设置",
  subs: [{
    title: "参数配置",
    subs: [{
      url: "../sale/add",
      title: "库存查询"
    }, {
      url: "../sale/list",
      title: "销售历史"
    }]
  }, {
    title: "仓库管理",
    subs: [{
      url: "../sale/add",
      title: "库存查询"
    }, {
      url: "../sale/list",
      title: "销售历史"
    }]
  }]
}

const menus = [saleMenu, buyMenu, storeMenu, clientMenu, infoMenu, settingMenu]

export default class LeftPanel extends React.PureComponent<any, any> {
  static contextTypes = {
    addTabPage: React.PropTypes.func
  }

  constructor(props) {
    super(props);
    this.state = {
      menus,
      selectIndex: -1,
    }
    this.onMenu = this.onMenu.bind(this);
  }
  componentDidMount() {
    const self = this;
    $(ReactDOM.findDOMNode(this)).on("mouseover", ".icon", function (e) {
      const index = $(this).attr("data-index");
      self.showSecondMenu(index);
      e.stopPropagation();
    })

    $("body").on("mouseover", function () {
      self.showSecondMenu(-1);
    })
  }

  onMenu(title: string, url: string) {
    this.setState({ selectIndex: -1 });
    this.context.addTabPage(title, url);
  }
  showSecondMenu(index) {
    this.setState({ selectIndex: index });
  }
  render() {
    const { menus, selectIndex } = this.state;
    return (
      <div className="leftMenu" >
        <ButtonGroup vertical className="menu">
          {
            menus.map((menu, index) =>
              <div key={menu.title}
                className={classNames({ select: index == selectIndex })}>
                <div data-index={index} className="icon">
                  <img src={menu.icon}></img>
                  <div className="text">{menu.title}</div>
                </div>
                <Overlay
                  show={index == selectIndex}
                  onHide={() => { }}
                  target={props => $(`.leftMenu [data-index=${index}]`)[0]}
                  container={this}
                  shouldUpdatePosition={true}
                  placement="right">
                  <SecondMenu id="secondMenu" menu={menu} className="secondMenu" onMenu={this.onMenu}></SecondMenu>
                </Overlay>
              </div>
            )
          }
        </ButtonGroup>
      </div>)
  }
}


